<template>
    <div>
            <el-dialog
            width="30%"
            :title="title"
            :visible.sync="innerVisible"
            v-on:close="closeHandler()"
            append-to-body>
            <span>
                <el-cascader
                placeholder="请选择：可搜索"
                :options="options"
                filterable
                change-on-select
                @change="handleItemChange"
                clearable>
            </el-cascader>
            </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="closeHandler()">取 消</el-button>
            <el-button type="primary" @click="onClickAddElmentHandler()">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: ["title", "listdata"],
    data() {
        return {
            innerVisible: true,
            options: this.listdata,
            selValue: []
        };
    },
    methods: {
        handleItemChange(value) {
            this.selValue = value;
        },
        onClickAddElmentHandler() {
            this.$emit("on-click-addelment", this.selValue);
        },
        closeHandler() {
            this.$emit("on-close-handler");
            this.innerVisible = false;
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>